// 引入 vue-router 的核心方法
import { createRouter, createWebHistory } from 'vue-router'
// 引入各个页面组件
import Home from '../view/Home.vue' // 商品列表页
import ProductDetail from '../view/ProductDetail.vue' // 商品详情页
import Cart from '../view/Cart.vue' // 购物车页
import Order from '../view/Order.vue' // 下单页
import Login from '../view/Login.vue' // 登录页
import Register from '../view/Register.vue' // 注册页

// 定义电商前台页面的路由表
const routes = [
  {
    path: '/', // 根路径，显示商品列表页
    component: Home
  },
  {
    path: '/product/:id', // 商品详情页，:id 为商品唯一标识
    component: ProductDetail,
    props: true // 将路由参数 id 作为 props 传递给组件
  },
  {
    path: '/cart', // 购物车页
    component: Cart
  },
  {
    path: '/order', // 下单页
    component: Order
  },
  {
    path: '/login', // 登录页
    component: Login
  },
  {
    path: '/register', // 注册页
    component: Register
  }
]

// 创建路由实例，使用 HTML5 的 history 模式
const router = createRouter({
  history: createWebHistory(), // 路由模式：history（地址栏无#号）
  routes // 路由表
})

export default router // 导出路由实例，供 main.js 引入使用
